<template>
  <div class="WidgetList">
    <div class="widget-list-header">组件库</div>
    <div class="widget-list-body">
      <a-collapse
        v-model:activeKey="expandKeys"
        expandIconPosition="right"
        :ghost="true"
        @change="(keys: string[]) => expandKeys = keys"
      >
        <a-collapse-panel
          v-for="(group, index) in widgetListConfig"
          :key="group.key"
          :header="`${group.title}（${group.list.length}）`"
        >
          <draggable
            class="widget-item-wrapper"
            :list="group.list"
            itemKey="id"
            :group="{ name: 'list', pull: 'clone', put: false }"
            :clone="cloneHandler"
            :sort="false"
            ghost-class="ghost"
            :force-fallback="true"
          >
            <template #item="{ element }">
              <div class="widget-item">
                <div class="item-box">
                  <i
                    class="widget-item-icon iconfont"
                    :class="element.icon"
                  ></i>
                  <div class="widget-item-name">{{ element.name }}</div>
                </div>
              </div>
            </template>
          </draggable>
        </a-collapse-panel>
      </a-collapse>
    </div>
  </div>
</template>

<script lang="ts">
import { Ref, defineComponent, onMounted, ref } from 'vue'
import draggable from 'vuedraggable'
import { widgetListConfig } from '@/components/DesignerComponents'

export default defineComponent({
  name: 'WidgetList',
  components: { draggable },
  setup() {
    let expandKeys: Ref<string[]> = ref([])
    onMounted(() => {
      expandKeys.value = widgetListConfig.map((item) => item.key)
    })

    const cloneHandler = (item: any) => {
      return { ...JSON.parse(JSON.stringify(item)), id: new Date().getTime() }
    }

    return {
      widgetListConfig,
      expandKeys,
      cloneHandler
    }
  }
})
</script>

<style lang="scss" scoped>
.WidgetList {
  .widget-list-header {
    font-size: 16px;
    font-weight: bold;
    height: 55px;
    line-height: 55px;
    padding: 0 16px;
    border-bottom: 1px solid #e3e7ee;
  }
  .widget-list-body {
    :deep(.ant-collapse-content-box) {
      padding: 0 !important;
    }
    .widget-item-wrapper {
      display: flex;
      align-items: stretch;
      flex-wrap: wrap;
      padding: 0 8px;
      .widget-item {
        width: 33.33%;
        padding: 8px;
        .item-box {
          height: 100%;
          background-color: rgba(244, 244, 244, 0.5);
          border: 1px solid #e3e7ee;
          border-radius: 4px;
          padding: 16px 0;
          cursor: pointer;
          text-align: center;
          transition-duration: 0.5s;
          line-height: 1;
          &:hover {
            border-color: #035dff;
            background-color: #fff;
            .widget-item-icon,
            .widget-item-name {
              color: #035dff;
            }
          }
          .widget-item-icon {
            font-size: 29px;
            transition-duration: 0.5s;
          }
          .widget-item-name {
            transition-duration: 0.5s;
            text-align: center;
            font-size: 12px;
            color: #666;
            padding: 0 2px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            margin-top: 10px;
          }
        }
      }
    }
  }
}
</style>
